<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p :style="{fontSize : fontSize+'px'}">{{ message }}</p>
			<button v-on:click="change">放大</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
	var app=new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!',
					fontSize: 10
				},
				methods:{
					change: function(){
						console.log("change被调用");
						this.fontSize=this.fontSize+10;
					}
				},
				beforeCreate(){
					console.log("beforeCreate");
				},
				created(){
					console.log("created");
				},
				beforeMount(){
					console.log("beforeMount");
				},
				mounted(){
					console.log("mounted");
				},
				beforeUpdate(){
					console.log("beforeUpdate");
				},
				updated(){
					console.log("updated");
				},
				beforeDestroy(){
					console.log("beforeDestroy");
				},
				destroyed(){
					console.log("destroyed");
				},
			})			
		</script>
	</body>
</html>
